<!DOCTYPE html>
<html lang="en">
<!--**
 *
 *----------Created by 黄伟峰 on 2018/11/20.----------
 * 　　　┏┓　　　┏┓
 * 　　┏┛┻━━━┛┻┓
 * 　　┃　　　　　　　┃
 * 　　┃　　　━　　　┃
 * 　　┃　┳┛　┗┳　┃
 * 　　┃　　　　　　　┃
 * 　　┃　　　┻　　　┃
 * 　　┃　　　　　　　┃
 * 　　┗━┓　　　┏━┛
 * 　　　　┃　　　┃神兽保佑
 * 　　　　┃　　　┃代码无BUG！
 * 　　　　┃　　　┗━━━┓
 * 　　　　┃　　　　　　　┣┓
 * 　　　　┃　　　　　　　┏┛
 * 　　　　┗┓┓┏━┳┓┏┛
 * 　　　　　┃┫┫　┃┫┫
 * 　　　　　┗┻┛　┗┻┛
 * ━━━━━━神兽出没━━━━━━by:web_hwf@sina.com
 *-->
<head>
    <meta charset="UTF-8">
    <title>步骤条</title>

    <!--响应式约束-->
    <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1 user-scalable=no"/>
    <!--使用IE兼容模式渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="../style/dist/zui@1.8.1/css/zui.min.css">
    <link rel="stylesheet" href="../style/h-admin.css">

    <link rel="stylesheet" href="css/initialize.css">


</head>
<body>


<article class="article" style="padding: 10px;background-color: #e5e5e5;">
    <header>
        <dl class="dl-inline pull-right">
            <dt>修改人：</dt>
            <dd>WF_Huang</dd>
            <dt>修改日期：</dt>
            <dd>2018年12月04日 (星期二) 11:30</dd>
            <dt></dt>
            <dd class="pull-right">
                <span class="label label-success">返回</span>
                <span class="label label-warning">布局</span>
            </dl>
        <h1 style="font-size: 24px;">步骤条</h1>
    </header>
</article>


<div id="page" class="">
    <div id="pageBody" class="scrollbar-hover">
        <div class="container">
            <div id="pageContent">

                <article>
                    <p>原来页面中的各种步骤条 太闹心了，每次都不太一样，重复写整的恶心。</p>
                </article>

                <section>
                    <header><h3>基本步骤条</h3> <span>特别鸣谢辉总管</span></header>
                    <article>
                        <div class="example">
                            <!--HTML 代码-->
                            <section class="strp_bar_common">
                                <a href="javascript:;" class="bar_item cur">
                                    <div class="bar_frbg"></div>
                                    <i></i>
                                    <em></em>
                                    <span class="hr-fr"></span>
                                    <h4>企业上报数据</h4>
                                    <p>2018-03-01 —— 2018-05-01</p>
                                </a>
                                <a href="javascript:;" class="bar_item state">
                                    <div class="bar_flbg"></div>
                                    <div class="bar_frbg"></div>
                                    <i></i>
                                    <em></em>
                                    <span class="hr-fl"></span>
                                    <span class="hr-fr"></span>
                                    <h4>上级工汇总数据</h4>
                                    <p>2018-05-13 —— 2018-07-03</p>
                                </a>
                                <a href="javascript:;" class="bar_item">
                                    <div class="bar_flbg"></div>
                                    <div class="bar_frbg"></div>
                                    <i></i>
                                    <em></em>
                                    <span class="hr-fl"></span>
                                    <h4>全国总工会总览数据</h4>
                                    <p>2018-05-13 —— 2018-07-03</p>
                                </a>
                                <a href="javascript:;" class="bar_item">
                                    <div class="bar_flbg"></div>
                                    <i></i>
                                    <em></em>
                                    <span class="hr-fl"></span>
                                    <h4>全国总工会总览数据</h4>
                                    <p>2018-05-13 —— 2018-07-03</p>
                                </a>
                            </section>

                            <section class="strp_bar_common">
                                <a href="javascript:;" class="bar_item cur adopt">
                                    <div class="bar_frbg"></div>
                                    <i></i>
                                    <em></em>
                                    <span class="hr-fr"></span>
                                    <h4>企业上报数据</h4>
                                    <p>2018-03-01 —— 2018-05-01</p>
                                </a>
                                <a href="javascript:;" class="bar_item cur">
                                    <div class="bar_flbg"></div>
                                    <div class="bar_frbg"></div>
                                    <i></i>
                                    <em></em>
                                    <span class="hr-fl"></span>
                                    <span class="hr-fr"></span>
                                    <h4>上级工汇总数据</h4>
                                    <p>2018-05-13 —— 2018-07-03</p>
                                </a>
                                <a href="javascript:;" class="bar_item state">
                                    <div class="bar_flbg"></div>
                                    <i></i>
                                    <em></em>
                                    <span class="hr-fl"></span>
                                    <h4>全国总工会总览数据</h4>
                                    <p>2018-05-13 —— 2018-07-03</p>
                                </a>
                            </section>
                        </div>

                        <pre class="prettyprint prettyprinted">
                             <code class="lang-css">
                              <!--css 代码-->
    .strp_bar_common { margin-top: 30px; margin-bottom: 30px; overflow: hidden; display: flex; }
    .strp_bar_common .bar_item { flex: 1; color: #999999; text-decoration: none; position: relative; text-align: center; }
    .strp_bar_common .bar_item .bar_frbg { height: 6px; width: 50%; background-color: #e4e1eb; position: absolute; right: 0; top: 5px; }
    .strp_bar_common .bar_item .bar_flbg { height: 6px; width: 50%; background-color: #e4e1eb; position: absolute; left: 0; top: 5px; }
    .strp_bar_common .bar_item em { width: 10px; height: 10px; background: #e4e1eb; position: absolute; left: 50%; margin-left: -5px; border-radius: 5px; top: 3px; z-index: 2; }
    .strp_bar_common .bar_item i { width: 16px; height: 16px; background: #e4e1eb; position: absolute; left: 50%; margin-left: -8px; border-radius: 8px; top: 0; }
    .strp_bar_common .bar_item h4 { font-size: 16px; line-height: 24px; margin-top: 30px; margin-bottom: 0; font-weight: normal; }
    .strp_bar_common .bar_item p { font-size: 12px; }
    .strp_bar_common .bar_item.cur { color: #4867cc; }
    .strp_bar_common .bar_item.cur .hr-fl { background: -webkit-linear-gradient(left, #4867cb, #a5777b); background: -ms-linear-gradient(left, #4867cb, #a5777b); background: -o-linear-gradient(left, #4867cb, #a5777b); background: -moz-linear-gradient(left, #4867cb, #a5777b); background: linear-gradient(to left, #4867cb, #a5777b); filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #4867cb, endColorstr = #a5777b); }
    .strp_bar_common .bar_item.cur .hr-fr { background: -webkit-linear-gradient(left, #4867cb, #a5777b); background: -ms-linear-gradient(left, #4867cb, #a5777b); background: -o-linear-gradient(left, #4867cb, #a5777b); background: -moz-linear-gradient(left, #4867cb, #a5777b); background: linear-gradient(to left, #4867cb, #a5777b); filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #4867cb, endColorstr = #a5777b); }
    .strp_bar_common .bar_item.cur em { background: #4867cc; }
    .strp_bar_common .bar_item.state { color: #ff872f; }
    .strp_bar_common .bar_item.state h4 { font-weight: bold; }
    .strp_bar_common .bar_item.state em { background: #ff872f; }
    .strp_bar_common .bar_item.state .hr-fl { background: -webkit-linear-gradient(left, #a5777b, #ff872f); background: -ms-linear-gradient(left, #a5777b, #ff872f); background: -o-linear-gradient(left, #a5777b, #ff872f); background: -moz-linear-gradient(left, #a5777b, #ff872f); background: linear-gradient(to left, #a5777b, #ff872f); filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #a5777b, endColorstr = #ff872f); }
    .strp_bar_common .bar_item.state .hr-fr { background: -webkit-linear-gradient(left, #a5777b, #ff872f); background: -ms-linear-gradient(left, #a5777b, #ff872f); background: -o-linear-gradient(left, #a5777b, #ff872f); background: -moz-linear-gradient(left, #a5777b, #ff872f); background: linear-gradient(to left, #a5777b, #ff872f); filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #a5777b, endColorstr = #ff872f); }
    .strp_bar_common .adopt .hr-fr { background: #4867cb; }
    .strp_bar_common .hr-fr { height: 2px; width: 50%; background-color: #e4e1eb; position: absolute; right: 0; top: 7px; }
    .strp_bar_common .hr-fl { height: 2px; width: 50%; background-color: #e4e1eb; position: absolute; left: 0; top: 7px; }
                            </code>
                        </pre>

                    </article>
                </section>
                <section>
                    <header><h3>数字步骤条</h3></header>
                    <article>
                        <div class="example">
                            <!--HTML 代码-->
                            <section class="strp_bar_number_common">
                                <a href="javascript:;" class="bar_item cur">
                                    <div class="bar_frbg"></div>
                                    <i></i>
                                    <em>1</em>
                                    <span class="hr-fr"></span>
                                    <h4>企业上报数据</h4>
                                    <p>2018-03-01 —— 2018-05-01</p>
                                </a>
                                <a href="javascript:;" class="bar_item state">
                                    <div class="bar_flbg"></div>
                                    <div class="bar_frbg"></div>
                                    <i></i>
                                    <em>2</em>
                                    <span class="hr-fl"></span>
                                    <span class="hr-fr"></span>
                                    <h4>上级工汇总数据</h4>
                                    <p>2018-05-13 —— 2018-07-03</p>
                                </a>
                                <a href="javascript:;" class="bar_item">
                                    <div class="bar_flbg"></div>
                                    <div class="bar_frbg"></div>
                                    <i></i>
                                    <em>3</em>
                                    <span class="hr-fl"></span>
                                    <h4>全国总工会总览数据</h4>
                                    <p>2018-05-13 —— 2018-07-03</p>
                                </a>
                                <a href="javascript:;" class="bar_item">
                                    <div class="bar_flbg"></div>
                                    <i></i>
                                    <em>4</em>
                                    <span class="hr-fl"></span>
                                    <h4>全国总工会总览数据</h4>
                                    <p>2018-05-13 —— 2018-07-03</p>
                                </a>
                            </section>

                            <section class="strp_bar_number_common">
                                <a href="javascript:;" class="bar_item cur adopt">
                                    <div class="bar_frbg"></div>
                                    <i></i>
                                    <em>1</em>
                                    <span class="hr-fr"></span>
                                    <h4>企业上报数据</h4>
                                    <p>2018-03-01 —— 2018-05-01</p>
                                </a>
                                <a href="javascript:;" class="bar_item cur">
                                    <div class="bar_flbg"></div>
                                    <div class="bar_frbg"></div>
                                    <i></i>
                                    <em>2</em>
                                    <span class="hr-fl"></span>
                                    <span class="hr-fr"></span>
                                    <h4>上级工汇总数据</h4>
                                    <p>2018-05-13 —— 2018-07-03</p>
                                </a>
                                <a href="javascript:;" class="bar_item state">
                                    <div class="bar_flbg"></div>
                                    <i></i>
                                    <em>3</em>
                                    <span class="hr-fl"></span>
                                    <h4>全国总工会总览数据</h4>
                                    <p>2018-05-13 —— 2018-07-03</p>
                                </a>
                            </section>
                        </div>

                        <pre class="prettyprint prettyprinted">
                             <code class="lang-css">
                              <!--css 代码-->
    .strp_bar_number_common { margin-top: 30px; margin-bottom: 30px; overflow: hidden; display: flex; }
    .strp_bar_number_common .bar_item { flex: 1; color: #999999; text-decoration: none; position: relative; text-align: center; }
    .strp_bar_number_common .bar_item .bar_frbg { height: 6px; width: 50%; background-color: #e4e1eb; position: absolute; right: 0; top: 11px; }
    .strp_bar_number_common .bar_item .bar_flbg { height: 6px; width: 50%; background-color: #e4e1eb; position: absolute; left: 0; top: 11px; }
    .strp_bar_number_common .bar_item em { width: 20px; height: 20px; background: #e4e1eb; position: absolute; left: 50%; margin-left: -5px; border-radius: 20px; color: #fff; top: 3px; z-index: 2; }
    .strp_bar_number_common .bar_item i { width: 26px; height: 26px; background: #e4e1eb; position: absolute; left: 50%; margin-left: -8px; border-radius: 28px; top: 0; }
    .strp_bar_number_common .bar_item h4 { font-size: 16px; line-height: 24px; margin-top: 30px; margin-bottom: 0; font-weight: normal; }
    .strp_bar_number_common .bar_item p { font-size: 12px; }
    .strp_bar_number_common .bar_item.cur { color: #4867cc; }
    .strp_bar_number_common .bar_item.cur .hr-fl { background: -webkit-linear-gradient(left, #4867cb, #a5777b); background: -ms-linear-gradient(left, #4867cb, #a5777b); background: -o-linear-gradient(left, #4867cb, #a5777b); background: -moz-linear-gradient(left, #4867cb, #a5777b); background: linear-gradient(to left, #4867cb, #a5777b); filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #4867cb, endColorstr = #a5777b); }
    .strp_bar_number_common .bar_item.cur .hr-fr { background: -webkit-linear-gradient(left, #4867cb, #a5777b); background: -ms-linear-gradient(left, #4867cb, #a5777b); background: -o-linear-gradient(left, #4867cb, #a5777b); background: -moz-linear-gradient(left, #4867cb, #a5777b); background: linear-gradient(to left, #4867cb, #a5777b); filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #4867cb, endColorstr = #a5777b); }
    .strp_bar_number_common .bar_item.cur em { background: #4867cc; }
    .strp_bar_number_common .bar_item.state { color: #ff872f; }
    .strp_bar_number_common .bar_item.state h4 { font-weight: bold; }
    .strp_bar_number_common .bar_item.state em { background: #ff872f; }
    .strp_bar_number_common .bar_item.state .hr-fl { background: -webkit-linear-gradient(left, #a5777b, #ff872f); background: -ms-linear-gradient(left, #a5777b, #ff872f); background: -o-linear-gradient(left, #a5777b, #ff872f); background: -moz-linear-gradient(left, #a5777b, #ff872f); background: linear-gradient(to left, #a5777b, #ff872f); filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #a5777b, endColorstr = #ff872f); }
    .strp_bar_number_common .bar_item.state .hr-fr { background: -webkit-linear-gradient(left, #a5777b, #ff872f); background: -ms-linear-gradient(left, #a5777b, #ff872f); background: -o-linear-gradient(left, #a5777b, #ff872f); background: -moz-linear-gradient(left, #a5777b, #ff872f); background: linear-gradient(to left, #a5777b, #ff872f); filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #a5777b, endColorstr = #ff872f); }
    .strp_bar_number_common .adopt .hr-fr { background: #4867cb; }
    .strp_bar_number_common .hr-fr { height: 2px; width: 50%; background-color: #e4e1eb; position: absolute; right: 0; top: 13px; }
    .strp_bar_number_common .hr-fl { height: 2px; width: 50%; background-color: #e4e1eb; position: absolute; left: 0; top: 13px; }
                            </code>
                        </pre>

                    </article>
                </section>

            </div>
        </div>
    </div>
</div>


</body>
</html>